<!-- 
Page based on the excellent ThreeJS Example page.
www.threejs.org
-->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>ami / examples</title>
    <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <style>

      @import url(https://fonts.googleapis.com/css?family=Roboto);

      @font-face {
        font-family: 'Roboto', sans-serif;
        font-weight: normal;
        font-style: normal;
      }

      *{
        box-sizing: border-box;
      }

      html {
        height: 100%;
      }

      body {
        background-color: #ffffff;
        margin: 0px;
        height: 100%;
        color: #555;
        font-family: 'Roboto', sans-serif;
        font-size: 15px;
        line-height: 18px;
        overflow: hidden;
      }

      h1 {
        margin-top: 30px;
        margin-bottom: 40px;
        margin-left: 20px;
        font-size: 25px;
        font-weight: normal;
      }

      h2 {
        font-size: 20px;
        font-weight: normal;
      }

      a {
        color: #2194CE;
        text-decoration: none;
      }

      #panel {
        position: fixed;
        left: 0px;
        width: 310px;
        height: 100%;
        overflow: auto;
        background: #fafafa;
      }

        #panel #content {
          padding: 0px 20px;
        }

        #panel #content .link {
          color: #2194CE;
          text-decoration: none;
          cursor: pointer;
        }

        #panel #content .selected {
          color: #ff0000;
        }

          #panel #content .link:hover {
            text-decoration: underline;
          }

      #viewer {
        position: absolute;
        border: 0px;
        left: 310px;
        width: calc(100% - 310px);
        height: 100%;
        overflow: auto;
      }

      #button {
        position: fixed;
        top: 20px;
        right: 20px;
        padding: 8px;
        color: #fff;
        background-color: #555;
        opacity: 0.7;
      }

        #button:hover {
          cursor: pointer;
          opacity: 1;
        }

      /* mobile */

      #expandButton {
        display: none;
        position: absolute;
        right: 20px;
        top: 12px;
        width: 32px;
        height: 32px;
      }

        #expandButton span {
          height: 2px;
          background-color: #2194CE;
          width: 16px;
          position: absolute;
          left: 8px;
          top: 10px;
        }

        #expandButton span:nth-child(1) {
          top: 16px;
        }

        #expandButton span:nth-child(2) {
          top: 22px;
        }

      @media all and ( max-width: 640px ) {
        h1{
          margin-top: 20px;
          margin-bottom: 20px;
        }
        #panel{
          position: absolute;
          left: 0;
          top: 0;
          height: 480px;
          width: 100%;
          right: 0;
          z-index: 100;
          overflow: hidden;
          border-bottom: 1px solid #dedede;
        }
        #content{
          position: absolute;
          left: 0;
          top: 60px;
          right: 0;
          bottom: 0;
          font-size: 17px;
          line-height: 22px;
          overflow: auto;
        }
        #viewer{
          position: absolute;
          left: 0;
          top: 56px;
          width: 100%;
          height: calc(100% - 56px);
        }
        #expandButton{
          display: block;
        }
        #panel.collapsed{
          height: 56px;
        }
      }

    </style>
  </head>
  <body>

    <div id="panel" class="collapsed">
      <h1><a href="https://github.com/FNNDSC/ami">ami</a> / examples</h1>
      <a id="expandButton" href="#">
        <span></span>
        <span></span>
        <span></span>
      </a>
      <div id="content">
      <div>
        <h2>welcome</h2>
        <div>
          <a href="https://github.com/FNNDSC/ami">src @ github</a>
        </div>
        <div>
          <a href="https://fnndsc.slack.org">chat @ slack</a> (<a href="http://slack.babymri.org">get invite</a>)
        </div>
        <div>
          <a href="doc/index.html">doc @ jsdoc</a>
        </div>
        </br>
        <div>
          <a href="https://github.com/FNNDSC/ami/issues/new">report a bug</a>
        </div>
        </div>
      </div>
    </div>
    <iframe id="viewer" allowfullscreen></iframe>

    <script>

'use strict';

var files = {
  'editor': [
    'editor_draw'
  ],
  'geometries': [
    'geometries_slice'
  ],
  'loader': [
    'loader_dicoms',
    // 'loader_nifti',
    'loader_nrrd'
  ],
  'widget': [
    'widget_handle'
  ],
  'viewers': [
    'viewers_upload',
    'viewers_compare',
    'viewers_labelmap',
    'viewers_quadview'
  ],
  'volume rendering': [
    'vr_singlepass'
  ],
  'xtk': [
    'xtk_lesson10',
    'xtk_lesson13'
  ]
};

var panel = document.getElementById( 'panel' );
var content = document.getElementById( 'content' );
var viewer = document.getElementById( 'viewer' );

var expandButton = document.getElementById( 'expandButton' );
expandButton.addEventListener( 'click', function ( event ) {
  panel.classList.toggle( 'collapsed' );
  event.preventDefault();
    } );

    // iOS8 workaround

    if ( /(iPad|iPhone|iPod)/g.test( navigator.userAgent ) ) {

      viewer.addEventListener( 'load', function ( event ) {

        viewer.contentWindow.innerWidth -= 10;
        viewer.contentWindow.innerHeight -= 2;

      } );

    }

    var container = document.createElement( 'div' );
    content.appendChild( container );

    var button = document.createElement( 'div' );
    button.id = 'button';
    button.textContent = 'View source';
    button.addEventListener( 'click', function ( event ) {

      var array = location.href.split( '/' );
      array.pop();

      window.open( 'https://github.com/FNNDSC/vjs/blob/dev/examples/' + selected + '/' + selected + '.js' );

    }, false );
    button.style.display = 'none';
    document.body.appendChild( button );

    var divs = {};
    var selected = null;

    for ( var key in files ) {

      var section = files[ key ];

      var div = document.createElement( 'h2' );
      div.textContent = key;
      container.appendChild( div );

      for ( var i = 0; i < section.length; i ++ ) {

        ( function ( file ) {

          var name = file.split( '_' );
          name.shift();
          name = name.join( ' / ' );

          var div = document.createElement( 'div' );
          div.className = 'link';
          div.textContent = name;
          div.addEventListener( 'click', function () {

            panel.classList.toggle( 'collapsed' );
            load( file );

          } );
          container.appendChild( div );

          divs[ file ] = div;

        } )( section[ i ] );

      }

    }

    var load = function ( file ) {

      if ( selected !== null ) divs[ selected ].className = 'link';

      divs[ file ].className = 'link selected';

      window.location.hash = file;
      window.console.log('examples/' + file + '/index.html');
      viewer.src = 'examples/' + file + '/index.html';
      viewer.focus();

      button.style.display = '';

      selected = file;

    };

    if ( window.location.hash !== '' ) {

      load( window.location.hash.substring( 1 ) );

    }

    </script>

    <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-39303022-3', 'auto');
    ga('send', 'pageview');

  </script>
  </body>
</html>
